<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>SuperheroAdmin - Bootstrap Admin Template</title>
	
	<!-- bootstrap -->
	<link href="css/bootstrap/bootstrap.css" rel="stylesheet" />

	<!-- libraries -->
	<link href="css/libs/font-awesome.css" type="text/css" rel="stylesheet" />

	<!-- global styles -->
	<link rel="stylesheet" type="text/css" href="css/compiled/layout.css">
	<link rel="stylesheet" type="text/css" href="css/compiled/elements.css">

	<!-- this page specific styles -->
	<link rel="stylesheet" href="css/libs/datepicker.css" type="text/css" />
	<link rel="stylesheet" href="css/libs/daterangepicker.css" type="text/css" />
	<link rel="stylesheet" href="css/libs/bootstrap-timepicker.css" type="text/css" />
	<link rel="stylesheet" href="css/libs/select2.css" type="text/css" />

	<!-- google font libraries -->
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300|Titillium+Web:200,300,400' rel='stylesheet' type='text/css'>
	
	<!--[if lt IE 9]>
	<script src="js/html5shiv.js"></script>
	<script src="js/respond.min.js"></script>
	<![endif]-->
	<!--[if lt IE 8]>
		<link href="css/libs/font-awesome-ie7.css" type="text/css" rel="stylesheet" />
	<![endif]-->
</head>
<body>
	<header class="navbar" id="header-navbar">
		<div class="container">
			<a href="index.html" id="logo" class="navbar-brand col-md-3 col-sm-4 col-xs-12">
				<img src="img/logo.png" alt=""/> SuperheroAdmin
			</a>
			
			<button class="navbar-toggle" data-target=".navbar-ex1-collapse" data-toggle="collapse" type="button">
				<span class="sr-only">Toggle navigation</span>
				<span class="fa fa-bars"></span>
			</button>
			
			<div class="nav-no-collapse pull-right" id="header-nav">
				<ul class="nav navbar-nav pull-right">
					<li class="mobile-search">
						<a class="btn">
							<i class="fa fa-search"></i>
						</a>
						
						<div class="drowdown-search">
							<form role="search">
								<div class="form-group">
									<input type="text" class="form-control" placeholder="Search...">
									<i class="fa fa-search nav-search-icon"></i>
								</div>
							</form>
						</div>
						
					</li>
					<li class="dropdown hidden-xs">
						<a class="btn dropdown-toggle" data-toggle="dropdown">
							<i class="fa fa-warning"></i>
							<span class="count">8</span>
						</a>
						<ul class="dropdown-menu notifications-list">
							<li class="pointer">
								<div class="pointer-inner">
									<div class="arrow"></div>
									<div class="arrow-border"></div>
								</div>
							</li>
							<li class="item-header">You have 6 new notifications</li>
							<li class="item">
								<a href="#">
									<i class="fa fa-comment"></i>
									<span class="content">New comment on ‘Awesome P...</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item">
								<a href="#">
									<i class="fa fa-plus"></i>
									<span class="content">New user registration</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item">
								<a href="#">
									<i class="fa fa-envelope"></i>
									<span class="content">New Message from George</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item">
								<a href="#">
									<i class="fa fa-shopping-cart"></i>
									<span class="content">New purchase</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item">
								<a href="#">
									<i class="fa fa-eye"></i>
									<span class="content">New order</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item-footer">
								<a href="#">
									View all notifications
								</a>
							</li>
						</ul>
					</li>
					<li class="dropdown hidden-xs">
						<a class="btn dropdown-toggle" data-toggle="dropdown">
							<i class="fa fa-envelope-o"></i>
							<span class="count">16</span>
						</a>
						<ul class="dropdown-menu notifications-list messages-list">
							<li class="pointer">
								<div class="pointer-inner">
									<div class="arrow"></div>
									<div class="arrow-border"></div>
								</div>
							</li>
							<li class="item first-item">
								<a href="#">
									<img src="img/samples/messages-photo-1.png" alt=""/>
									<span class="content">
										<span class="content-headline">
											George Clooney
										</span>
										<span class="content-text">
											Look, just because I don't be givin' no man a foot massage don't make it 
											right for Marsellus to throw...
										</span>
									</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item">
								<a href="#">
									<img src="img/samples/messages-photo-2.png" alt=""/>
									<span class="content">
										<span class="content-headline">
											Emma Watson
										</span>
										<span class="content-text">
											Look, just because I don't be givin' no man a foot massage don't make it 
											right for Marsellus to throw...
										</span>
									</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item">
								<a href="#">
									<img src="img/samples/messages-photo-3.png" alt=""/>
									<span class="content">
										<span class="content-headline">
											Robert Downey Jr.
										</span>
										<span class="content-text">
											Look, just because I don't be givin' no man a foot massage don't make it 
											right for Marsellus to throw...
										</span>
									</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item-footer">
								<a href="#">
									View all messages
								</a>
							</li>
						</ul>
					</li>
					<li class="hidden-xs">
						<a class="btn">
							<i class="fa fa-cog"></i>
						</a>
					</li>
					<li class="dropdown profile-dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							<img src="img/samples/profile-photo.png" alt=""/>
							<span class="hidden-xs">Scarlett Johansson</span> <b class="caret"></b>
						</a>
						<ul class="dropdown-menu">
							<li><a href="user-profile.html"><i class="fa fa-user"></i>Profile</a></li>
							<li><a href="#"><i class="fa fa-cog"></i>Settings</a></li>
							<li><a href="#"><i class="fa fa-envelope-o"></i>Messages</a></li>
							<li><a href="#"><i class="fa fa-power-off"></i>Logout</a></li>
						</ul>
					</li>
					<li class="hidden-xxs">
						<a class="btn">
							<i class="fa fa-power-off"></i>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</header>
	<div class="container">
		<div class="row">
			<div class="col-md-2" id="nav-col">
				<section id="col-left">
					<div class="collapse navbar-collapse navbar-ex1-collapse" id="sidebar-nav">	
						<ul class="nav nav-pills nav-stacked">
							<li>
								<a href="index.html">
									<i class="fa fa-dashboard"></i>
									<span>Dashboard</span>
								</a>
							</li>
							<li>
								<a href="#" class="dropdown-toggle">
									<i class="fa fa-bar-chart-o"></i>
									<span>Graphs</span>
									<i class="fa fa-chevron-circle-down drop-icon"></i>
								</a>
								<ul class="submenu">
									<li>
										<a href="graphs-xcharts.html">
											xCharts
										</a>
									</li>
									<li>
										<a href="graphs-flot.html">
											Flot
										</a>
									</li>
									<li>
										<a href="graphs-morris.html">
											Morris &amp; Mixed
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#" class="dropdown-toggle">
									<i class="fa fa-users"></i>
									<span>Users</span>
									<i class="fa fa-chevron-circle-down drop-icon"></i>
								</a>
								<ul class="submenu">
									<li>
										<a href="users.html">
											User list
										</a>
									</li>
									<li>
										<a href="user-profile.html">
											User profile
										</a>
									</li>
								</ul>
							</li>
							<li class="active">
								<a href="#" class="dropdown-toggle">
									<i class="fa fa-edit"></i>
									<span>Forms</span>
									<i class="fa fa-chevron-circle-down drop-icon"></i>
								</a>
								<ul class="submenu">
									<li>
										<a href="form-elements.html" class="active">
											Form elements
										</a>
									</li>
									<li>
										<a href="form-wizard.html">
											Form wizard
										</a>
									</li>
									<li>
										<a href="form-wizard-popup.html">
											Form wizard popup
										</a>
									</li>
									<li>
										<a href="form-wysiwyg.html">
											WYSIWYG
										</a>
									</li>
									<li>
										<a href="form-ckeditor.html">
											WYSIWYG CKEditor
										</a>
									</li>
									<li>
										<a href="form-dropzone.html">
											Drop File Upload
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="tables.html">
									<i class="fa fa-table"></i>
									<span>Tables</span>
								</a>
							</li>
							<li>
								<a href="typography.html">
									<i class="fa fa-font"></i>
									<span>Typography</span>
								</a>
							</li>
							<li>
								<a href="calendar.html">
									<i class="fa fa-calendar"></i>
									<span>Calendar</span>
								</a>
							</li>
							<li>
								<a href="#" class="dropdown-toggle">
									<i class="fa fa-star"></i>
									<span>Icons</span>
									<i class="fa fa-chevron-circle-down drop-icon"></i>
								</a>
								<ul class="submenu">
									<li>
										<a href="icons-awesome.html">
											Awesome Icons
										</a>
									</li>
									<li>
										<a href="icons-halflings.html">
											Halflings
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#" class="dropdown-toggle">
									<i class="fa fa-desktop"></i>
									<span>UI Elements</span>
									<i class="fa fa-chevron-circle-down drop-icon"></i>
								</a>
								<ul class="submenu">
									<li>
										<a href="ui-elements.html">
											Elements
										</a>
									</li>
									<li>
										<a href="ui-nestable.html">
											Nestable
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="gallery.html">
									<i class="fa fa-picture-o"></i>
									<span>Gallery</span>
								</a>
							</li>
							<li>
								<a href="#" class="dropdown-toggle">
									<i class="fa fa-folder-open"></i>
									<span>3 Level Menu</span>
									<i class="fa fa-chevron-circle-down drop-icon"></i>
								</a>
								<ul class="submenu">
									<li>
										<a href="#" class="dropdown-toggle">
											2nd Level
											<i class="fa fa-chevron-circle-down drop-icon"></i>
										</a>
										<ul class="submenu">
											<li>
												<a href="#">
													3rd Level
												</a>
											</li>
											<li>
												<a href="#">
													3rd Level
												</a>
											</li>
											<li>
												<a href="#">
													3rd Level
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="#" class="dropdown-toggle">
											2nd Level
											<i class="fa fa-chevron-circle-down drop-icon"></i>
										</a>
										<ul class="submenu">
											<li>
												<a href="#">
													3rd Level
												</a>
											</li>
											<li>
												<a href="#">
													3rd Level
												</a>
											</li>
											<li>
												<a href="#">
													3rd Level
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="#">
											2nd Level
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#" class="dropdown-toggle">
									<i class="fa fa-file-text-o"></i>
									<span>Extra pages</span>
									<i class="fa fa-chevron-circle-down drop-icon"></i>
								</a>
								<ul class="submenu">
									<li>
										<a href="pricing.html">
											Pricing
										</a>
									</li>
									<li>
										<a href="login.html">
											Login
										</a>
									</li>
									<li>
										<a href="login-full.html">
											Login full
										</a>
									</li>
									<li>
										<a href="invoice.html">
											Invoice
										</a>
									</li>
									<li>
										<a href="emails.html">
											Emails
										</a>
									</li>
									<li>
										<a href="faq.html">
											FAQ
										</a>
									</li>
									<li>
										<a href="error-404.html">
											Error 404
										</a>
									</li>
									<li>
										<a href="error-404-v2.html">
											Error 404 Nested
										</a>
									</li>
									<li>
										<a href="error-500.html">
											Error 500
										</a>
									</li>
									<li>
										<a href="extra-grid.html">
											Grid
										</a>
									</li>
								</ul>
							</li>
						</ul>
					</div>
				</section>
			</div>
			<div class="col-md-10 col-sm-11" id="content-wrapper">
				<div class="row">
					<div class="col-lg-12">
					
						<h1>Form Elements</h1>
					
						<div class="row">
							<div class="col-lg-6">
								<div class="main-box">
									<h2>Basic elements</h2>
									<form role="form">
										<div class="form-group">
											<label for="exampleInputEmail1">Email address</label>
											<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
										</div>
										<div class="form-group">
											<label for="exampleInputPassword1">Password</label>
											<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
										</div>
										<div class="form-group">
											<label for="exampleTextarea">Textarea</label>
											<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
										</div>
										
										<div class="form-group">
											<label for="exampleTooltip">Input with Tooltip</label>
											<input type="text" class="form-control" id="exampleTooltip" data-toggle="tooltip" data-placement="bottom" title="very nice tooltip about this field">
										</div>
										
										<div class="form-group">
											<label>Default Select</label>
											<select class="form-control">
												<option>1</option>
												<option>2</option>
												<option>3</option>
												<option>4</option>
												<option>5</option>
											</select>
										</div>
										
										<div class="form-group">
											<label>Multiple select</label>
											<select multiple class="form-control">
												<option>1</option>
												<option>2</option>
												<option>3</option>
												<option>4</option>
												<option>5</option>
											</select>
										</div>
									
										<div class="form-group form-group-select2">
											<label>Enhanced Select</label>
											<select style="width:300px" id="sel2">
												<option value="United States">United States</option> 
												<option value="United Kingdom">United Kingdom</option> 
												<option value="Afghanistan">Afghanistan</option> 
												<option value="Albania">Albania</option> 
												<option value="Algeria">Algeria</option> 
												<option value="American Samoa">American Samoa</option> 
												<option value="Andorra">Andorra</option> 
												<option value="Angola">Angola</option> 
												<option value="Anguilla">Anguilla</option> 
												<option value="Antarctica">Antarctica</option> 
												<option value="Antigua and Barbuda">Antigua and Barbuda</option> 
												<option value="Argentina">Argentina</option> 
												<option value="Armenia">Armenia</option> 
												<option value="Aruba">Aruba</option> 
												<option value="Australia">Australia</option> 
												<option value="Austria">Austria</option> 
												<option value="Azerbaijan">Azerbaijan</option> 
												<option value="Slovakia">Slovakia</option> 
											</select>
										</div>
										
										<div class="form-group form-group-select2">
											<label>Multi-Value Select Boxes</label>
											<select style="width:300px" id="sel2Multi" multiple>
												<option value="United States">United States</option> 
												<option value="United Kingdom">United Kingdom</option> 
												<option value="Afghanistan">Afghanistan</option> 
												<option value="Albania">Albania</option> 
												<option value="Algeria">Algeria</option> 
												<option value="American Samoa">American Samoa</option> 
												<option value="Andorra">Andorra</option> 
												<option value="Angola">Angola</option> 
												<option value="Anguilla">Anguilla</option> 
												<option value="Antarctica">Antarctica</option> 
												<option value="Antigua and Barbuda">Antigua and Barbuda</option> 
												<option value="Argentina">Argentina</option> 
												<option value="Armenia">Armenia</option> 
												<option value="Aruba">Aruba</option> 
												<option value="Australia">Australia</option> 
												<option value="Austria">Austria</option> 
												<option value="Azerbaijan">Azerbaijan</option> 
												<option value="Slovakia">Slovakia</option> 
											</select>
										</div>

										<div class="form-group">
											<label for="exampleAutocompleteSimple">Autocomplete</label>
											<input type="text" class="form-control" id="exampleAutocompleteSimple" placeholder="countries">
										</div>

										<div class="form-group example-twitter-oss">
											<label for="exampleAutocomplete">Autocomplete with templating</label>
											<input type="text" class="form-control" id="exampleAutocomplete" placeholder="open source projects by Twitter">
										</div>
										
										<div class="form-group">
											<label for="examplePwdMeter">Password strength meter (start typing...)</label>
											<input type="password" class="form-control" id="examplePwdMeter" placeholder="Enter password" data-indicator="pwindicator">
											<div id="pwindicator" class="pwdindicator">
												<div class="bar"></div>
												<div class="pwdstrength-label"></div>
											</div>
										</div>
									</form>
								</div>
							</div>
							<div class="col-lg-6">
								<div class="main-box">
									<h2>Other elements</h2>
									
									<div class="form-group has-success">
										<label class="control-label" for="inputSuccess">Input with success</label>
										<input type="text" class="form-control" id="inputSuccess">
										<span class="help-block"><i class="icon-ok-sign"></i> Success message</span>
									</div>
									<div class="form-group has-warning">
										<label class="control-label" for="inputWarning">Input with warning</label>
										<input type="text" class="form-control" id="inputWarning">
										<span class="help-block"><i class="icon-warning-sign"></i> Warning message</span>
									</div>
									<div class="form-group has-error">
										<label class="control-label" for="inputError">Input with error</label>
										<input type="text" class="form-control" id="inputError">
										<span class="help-block"><i class="icon-remove-sign"></i> Error message</span>
									</div>
									
									<div class="form-group">
										<label for="exampleInputFile">Disabled input</label>
										<input class="form-control" id="exampleInputFile" type="text" placeholder="Disabled input here..." disabled>
									</div>
										
									<div class="form-group">
										<label>Checkboxes</label>
										<div class="checkbox">
											<label>
												<input type="checkbox" value="">
												Option one is this and that&mdash;be sure to include why it's great
											</label>
										</div>
										<div class="checkbox">
											<label>
												<input type="checkbox" value="">
												Option two is this and that&mdash;be sure to include why it's great
											</label>
										</div>
										<div class="checkbox">
											<label>
												<input type="checkbox" value="">
												Option three is this and that&mdash;be sure to include why it's great
											</label>
										</div>
									</div>
									
									<div class="form-group">
										<label>Radio inputs</label>
										<div class="radio">
											<label>
												<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
												Option one is this and that&mdash;be sure to include why it's great
											</label>
										</div>
										<div class="radio">
											<label>
												<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
												Option two can be something else and selecting it will deselect option one
											</label>
										</div>
									</div>
									
									<div class="form-group">
										<label>Inline checkboxes</label>
										<br/>
										<label class="checkbox-inline">
											<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
										</label>
										<label class="checkbox-inline">
											<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
										</label>
										<label class="checkbox-inline">
											<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
										</label>
									</div>
									
									<h3><span>Checkbox buttons</span></h3>
									<div class="btn-group" data-toggle="buttons">
										<label class="btn btn-primary">
											<input type="checkbox"> Option 1
										</label>
										<label class="btn btn-primary">
											<input type="checkbox"> Option 2
										</label>
										<label class="btn btn-primary">
											<input type="checkbox"> Option 3
										</label>
									</div>
									
									<h3><span>Radio buttons</span></h3>
									<div class="btn-group" data-toggle="buttons">
										<label class="btn btn-primary">
											<input type="radio" name="options" id="option1"> Option 1
										</label>
										<label class="btn btn-primary">
											<input type="radio" name="options" id="option2"> Option 2
										</label>
										<label class="btn btn-primary">
											<input type="radio" name="options" id="option3"> Option 3
										</label>
									</div>
									
									<br/><br/>
										
								</div>
							</div>	
						</div>
						
						<div class="row">
							<div class="col-lg-12">
								<div class="main-box">
									<h2>Inline form</h2>
									<form class="form-inline" role="form">
										<div class="form-group">
											<label class="sr-only" for="exampleInputEmail2">Email address</label>
											<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
										</div>
										<div class="form-group">
											<label class="sr-only" for="exampleInputPassword2">Password</label>
											<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
										</div>
										<div class="checkbox">
											<label>
												<input type="checkbox"> Remember me
											</label>
										</div>
										<button type="submit" class="btn btn-success">Sign in</button>
									</form>									
								</div>
							</div>	
						</div>
						
						<div class="row">
							<div class="col-lg-12">
								<div class="main-box">
									<h2>Horizontal form</h2>
									<form class="form-horizontal" role="form">
										<div class="form-group">
											<label for="inputEmail1" class="col-lg-2 control-label">Email</label>
											<div class="col-lg-10">
												<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
											</div>
										</div>
										<div class="form-group">
											<label for="inputPassword1" class="col-lg-2 control-label">Password</label>
											<div class="col-lg-10">
												<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
											</div>
										</div>
										<div class="form-group">
											<div class="col-lg-offset-2 col-lg-10">
												<div class="checkbox">
													<label>
														<input type="checkbox"> Remember me
													</label>
												</div>
											</div>
										</div>
										<div class="form-group">
											<div class="col-lg-offset-2 col-lg-10">
												<button type="submit" class="btn btn-success">Sign in</button>
											</div>
										</div>
									</form>									
								</div>
							</div>	
						</div>
						
						<div class="row">
							<div class="col-lg-6">
								<div class="main-box">
									<h2>Input groups</h2>
									<form role="form">
										<div class="form-group">
											<label for="examplePrepend">Prepend</label>
											<div class="input-group">
												<span class="input-group-addon">@</span>
												<input type="text" class="form-control" id="examplePrepend" placeholder="prepend text here">
											</div>
										</div>
										<div class="form-group">
											<label for="exampleAppend">Append</label>
											<div class="input-group">
												<input type="text" class="form-control" id="exampleAppend">
												<span class="input-group-addon">.00</span>
											</div>
										</div>
										<div class="form-group">
											<label for="exampleAppPre">Append and Prepend</label>
											<div class="input-group">
												<span class="input-group-addon">$</span>
												<input type="text" class="form-control" id="exampleAppPre">
												<span class="input-group-addon">.00</span>
											</div>
										</div>
										<div class="form-group">
											<label for="exmaplePrependCheck">Prepend checkbox</label>
											<div class="input-group">
												<span class="input-group-addon">
													<input type="checkbox">
												</span>
												<input type="text" class="form-control" id="exmaplePrependCheck">
											</div>
										</div>
										<div class="form-group">
											<label for="exampleRadio">Prepend radio</label>
											<div class="input-group">
												<span class="input-group-addon">
													<input type="radio">
												</span>
												<input type="text" class="form-control" id="exampleRadio">
											</div>
										</div>
										<div class="form-group">
											<label for="exmaplePrependButton">Prepend button</label>
											<div class="input-group">
												<span class="input-group-btn">
													<button class="btn btn-default" type="button">Go!</button>
												</span>
												<input type="text" class="form-control" id="exmaplePrependButton">
											</div>
										</div>
										<div class="form-group">
											<label for="examplePrependDropdown">Prepend button dropdown</label>
											<div class="input-group">
												<div class="input-group-btn">
													<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
													<ul class="dropdown-menu">
														<li><a href="#">Action</a></li>
														<li><a href="#">Another action</a></li>
														<li><a href="#">Something else here</a></li>
														<li class="divider"></li>
														<li><a href="#">Separated link</a></li>
													</ul>
												</div>
												<input type="text" class="form-control" id="examplePrependDropdown">
											</div>
										</div>
									</form>									
								</div>
							</div>	
							<div class="col-lg-6">
								<div class="main-box">
									<h2>Masked inputs</h2>
									
									<div class="row">
										<div class="form-group col-md-6">
											<label for="maskedDate">Date</label>
											<div class="input-group">
												<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
												<input type="text" class="form-control" id="maskedDate">
											</div>
											<span class="help-block">ex. 99/99/9999</span>
										</div>
									</div>
									
									<div class="row">
										<div class="form-group col-md-6">
											<label for="maskedPhone">Phone</label>
											<div class="input-group">
												<span class="input-group-addon"><i class="fa fa-phone"></i></span>
												<input type="text" class="form-control" id="maskedPhone">
											</div>
											<span class="help-block">ex. (999) 999-9999</span>
										</div>
									</div>
									
									<div class="row">
										<div class="form-group col-md-6">
											<label for="maskedPhoneExt">Phone + Ext</label>
											<div class="input-group">
												<span class="input-group-addon"><i class="fa fa-mobile-phone"></i></span>
												<input type="text" class="form-control" id="maskedPhoneExt">
											</div>
											<span class="help-block">ex. (999) 999-9999? x99999</span>
										</div>
									</div>
									
									<div class="row">
										<div class="form-group col-md-6">
											<label for="maskedTax">Tax ID</label>
											<div class="input-group">
												<span class="input-group-addon"><i class="fa fa-money"></i></span>
												<input type="text" class="form-control" id="maskedTax">
											</div>
											<span class="help-block">ex. 99-9999999</span>
										</div>
									</div>
									
									<div class="row">
										<div class="form-group col-md-6">
											<label for="maskedSsn">SSN</label>
											<div class="input-group">
												<span class="input-group-addon"><i class="fa fa-male"></i></span>
												<input type="text" class="form-control" id="maskedSsn">
											</div>
											<span class="help-block">ex. 999-99-9999</span>
										</div>
									</div>
									
								</div>
							</div>	
						</div>
						
						<div class="row">
							<div class="col-lg-12">
								<div class="main-box">
									<h2>Switches</h2>
									
									<div class="row">
										<div class="col-lg-12">
											<div class="pull-left">
											    <div class="onoffswitch">
													<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
													<label class="onoffswitch-label" for="myonoffswitch">
														<div class="onoffswitch-inner"></div>
														<div class="onoffswitch-switch"></div>
													</label>
												</div>
											</div>
											<div class="pull-left">
											    <div class="onoffswitch onoffswitch-danger">
													<input type="checkbox" name="onoffswitch2" class="onoffswitch-checkbox" id="myonoffswitch2" checked>
													<label class="onoffswitch-label" for="myonoffswitch2">
														<div class="onoffswitch-inner"></div>
														<div class="onoffswitch-switch"></div>
													</label>
												</div>
											</div>
											<div class="pull-left">
											    <div class="onoffswitch onoffswitch-warning">
													<input type="checkbox" name="onoffswitch3" class="onoffswitch-checkbox" id="myonoffswitch3" checked>
													<label class="onoffswitch-label" for="myonoffswitch3">
														<div class="onoffswitch-inner"></div>
														<div class="onoffswitch-switch"></div>
													</label>
												</div>
											</div>
											<div class="pull-left">
											    <div class="onoffswitch onoffswitch-success">
													<input type="checkbox" name="onoffswitch4" class="onoffswitch-checkbox" id="myonoffswitch4" checked>
													<label class="onoffswitch-label" for="myonoffswitch4">
														<div class="onoffswitch-inner"></div>
														<div class="onoffswitch-switch"></div>
													</label>
												</div>
											</div>
											<div class="clearfix"> </div>
											<br/>
											<span class="help-block">
												Pure CSS3 On/Off FlipSwitch - you can make your own custom on/off switch 
												<a href="http://proto.io/freebies/onoff/" target="_blank">here</a>
											</span>
										</div>
									</div>
									
									
								</div>
							</div>
						</div>
						
						<div class="row">
							<div class="col-lg-12">
								<div class="main-box">
									<h2>Datepickers</h2>
									
									<div class="row">
										<div class="col-lg-6">
											<div class="row">
												<div class="form-group col-md-12">
													<label for="datepickerDate">Date</label>
													<div class="input-group">
														<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
														<input type="text" class="form-control" id="datepickerDate">
													</div>
													<span class="help-block">format mm-dd-yyyy</span>
												</div>
											</div>
											
											<div class="row">
												<div class="form-group col-md-12">
													<label for="datepickerDateRange">Date range</label>
													<div class="input-group">
														<span class="input-group-addon"><i class="fa fa-calendar-o"></i></span>
														<input type="text" class="form-control" id="datepickerDateRange">
													</div>
												</div>
											</div>
										</div>
										
										<div class="col-lg-6">
											<div class="row">
												<div class="form-group col-md-12">
													<label for="datepickerDateComponent">Date readonly</label>
													<div class="input-group" data-date-format="dd-mm-yyyy">
														<input type="text" class="form-control" id="datepickerDateComponent" readonly>
														<span class="input-group-addon"><i class="fa fa-th"></i></span>
													</div>
													<span class="help-block">As component.</span>
												</div>
											</div>
											
											<div class="row">
												<div class="form-group col-md-12">
													<label for="timepicker">Time picker</label>
													<div class="input-group input-append bootstrap-timepicker">
														<input type="text" class="form-control" id="timepicker">
														<span class="add-on input-group-addon"><i class="fa fa-clock-o"></i></span>
													</div>
												</div>
											</div>
										</div>
									</div>
									
								</div>
							</div>	
						</div>
						
						<div class="row">
							<div class="col-lg-12">
								<div class="main-box">
									<h2>Grid sizing</h2>
									<form role="form">
										<div class="row">
											<div class="form-group col-xs-3">
												<input type="text" class="form-control" placeholder=".col-xs-3">
											</div>
											<div class="form-group col-xs-3">
												<input type="text" class="form-control" placeholder=".col-xs-3">
											</div>
											<div class="form-group col-xs-3">
												<input type="text" class="form-control" placeholder=".col-xs-3">
											</div>
											<div class="form-group col-xs-3">
												<input type="text" class="form-control" placeholder=".col-xs-3">
											</div>
										</div>
										<div class="row">
											<div class="form-group col-xs-4">
												<input type="text" class="form-control" placeholder=".col-xs-4">
											</div>
											<div class="form-group col-xs-4">
												<input type="text" class="form-control" placeholder=".col-xs-4">
											</div>
											<div class="form-group col-xs-4">
												<input type="text" class="form-control" placeholder=".col-xs-4">
											</div>
										</div>
										<div class="row">
											<div class="form-group col-xs-6">
												<input type="text" class="form-control" placeholder=".col-xs-6">
											</div>
											<div class="form-group col-xs-6">
												<input type="text" class="form-control" placeholder=".col-xs-6">
											</div>
										</div>
										<div class="row">
											<div class="form-group col-xs-7">
												<input type="text" class="form-control" placeholder=".col-xs-7">
											</div>
											<div class="form-group col-xs-5">
												<input type="text" class="form-control" placeholder=".col-xs-5">
											</div>
										</div>
										<div class="row">
											<div class="form-group col-xs-12">
												<input type="text" class="form-control" placeholder=".col-xs-12">
											</div>
										</div>
									</form>
								</div>
							</div>	
						</div>
						
						
					</div>
				</div>
			</div>
		</div>
	</div>
	<footer id="footer-bar">
		<p id="footer-copyright">
			&copy; 2014 <a href="http://www.adbee.sk/" target="_blank">Adbee digital</a>. Powered by SuperheroAdmin.
		</p>
	</footer>
	
	<!-- global scripts -->
	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.js"></script>
	
	<!-- this page specific scripts -->
	<script src="js/jquery.maskedinput.min.js"></script>
	<script src="js/bootstrap-datepicker.js"></script>
	<script src="js/moment.min.js"></script>
	<script src="js/daterangepicker.js"></script>
	<script src="js/bootstrap-timepicker.min.js"></script>
	<script src="js/select2.min.js"></script>
	<script src="js/hogan.js"></script>
	<script src="js/typeahead.min.js"></script>
	<script src="js/jquery.pwstrength.js"></script>
	
	<!-- theme scripts -->
	<script src="js/scripts.js"></script>
	
	<!-- this page specific inline scripts -->
	<script>
	$(function($) {
		//tooltip init
		$('#exampleTooltip').tooltip();

		//nice select boxes
		$('#sel2').select2();
		
		$('#sel2Multi').select2({
			placeholder: 'Select a Country',
			allowClear: true
		});
	
		//masked inputs
		$("#maskedDate").mask("99/99/9999");
		$("#maskedPhone").mask("(999) 999-9999");
		$("#maskedPhoneExt").mask("(999) 999-9999? x99999");
		$("#maskedTax").mask("99-9999999");
		$("#maskedSsn").mask("999-99-9999");
		
		$("#maskedProductKey").mask("a*-999-a999",{placeholder:" ",completed:function(){alert("You typed the following: "+this.val());}});
		
		$.mask.definitions['~']='[+-]';
		$("#maskedEye").mask("~9.99 ~9.99 999");
	
		//datepicker
		$('#datepickerDate').datepicker({
		  format: 'mm-dd-yyyy'
		});

		$('#datepickerDateComponent').datepicker();
		
		//daterange picker
		$('#datepickerDateRange').daterangepicker();
		
		//timepicker
		$('#timepicker').timepicker({
			minuteStep: 5,
			showSeconds: true,
			showMeridian: false,
			disableFocus: false,
			showWidget: true
		}).focus(function() {
			$(this).next().trigger('click');
		});
		
		//autocomplete simple
		$('#exampleAutocompleteSimple').typeahead({                              
			prefetch: '/data/countries.json',
			limit: 10
		});
		
		//autocomplete with templating
		$('#exampleAutocomplete').typeahead({                              
			name: 'twitter-oss',                                                        
			prefetch: '/data/repos.json',                                             
			template: [                                                              
				'<p class="repo-language">{{language}}</p>',                              
				'<p class="repo-name">{{name}}</p>',                                      
				'<p class="repo-description">{{description}}</p>'                         
			].join(''),                                                                 
			engine: Hogan                                                               
		});
		
		//password strength meter
		$('#examplePwdMeter').pwstrength({
			label: '.pwdstrength-label'
		});
		
	});
	</script>
</body>
</html>